<template>
  <el-card class="content">
    <h3>统计报表</h3>
    <el-form
      :model="form"
      size="medium"
      label-position="left"
      label-width="160px"
    >
      <el-form-item label="选择检测项">
        <el-select
          placeholder="项目信息列表"
          v-model="form.monitorId"
          clearable
          @change="selectChange"
          style="display: flex"
        >
          <el-option
            v-for="(item, index) in monitorList"
            :key="index"
            :label="item.monitorName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报表发送邮箱">
        <el-input
          placeholder="请输入收件人邮箱"
          v-model="form.reportEmail"
        ></el-input>
      </el-form-item>
      <el-form-item label="报表标题">
        <el-input
          placeholder="请输入报表标题"
          v-model="form.reportTitle"
        ></el-input>
      </el-form-item>
      <el-form-item label="工作概况">
        <el-input
          type="textarea"
          placeholder="请输入工作概况"
          v-model="form.projectName"
        ></el-input>
      </el-form-item>
      <el-form-item label="作业依据">
        <el-input
          type="textarea"
          placeholder="请输入作业依据"
          v-model="form.projectSource"
        ></el-input>
      </el-form-item>
      <el-form-item label="技术路线">
        <el-input
          type="textarea"
          placeholder="请输入技术路线"
          v-model="form.projectCycle"
        ></el-input>
      </el-form-item>
      <el-form-item label="监测网布设">
        <el-input
          type="textarea"
          placeholder="请输入监测网布设"
          v-model="form.projectCycle"
        ></el-input>
      </el-form-item>
      <el-form-item label="监测网布设图上传">
        <el-upload
        ref="upload"
        action="#"
        accept="image/png,image/gif,image/jpg,image/jpeg"
        list-type="picture-card"
        :limit=limitNum
        :auto-upload="false"
        :on-exceed="handleExceed"
        :before-upload="handleBeforeUpload"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      </el-form-item>
      <el-form-item label="预警值设置及预警方式">
        <el-input
          type="textarea"
          placeholder="请输入预警值设置及预警方式"
          v-model="form.projectEmployer"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮件标题">
        <el-input
          type="textarea"
          placeholder="请输入邮件标题内容"
          v-model="form.emailTitle"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮件正文内容">
        <el-input
          type="textarea"
          placeholder="请输入邮件正文内容"
          v-model="form.emailContent"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="save">保存</el-button>
        <el-button @click="empty">清空</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import Axios from "axios";
import moment, { localeData } from "moment";
import * as serviceApi from "../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "StatisticalReport",
  data() {
    return {
      monitorList: null,
      form: {
        monitorId: "",
        reportEmail: "",
        reportTitle: "",
        projectName: "",
        projectSource: "",
        projectDate: "",
        monitorStartDate: "",
        monitorEndDate: "",
        projectCycle: "",
        projectEmployer: "",
        construcUnit: "",
        monitorUnit: "",
        emailTitle: "",
        emailContent: "",
      },
      dialogImageUrl: '',
      dialogVisible: false,
      formLabelWidth: '80px',
      limitNum: 3,
    };
  },
  methods: {
    selectChange(value) {
      console.log(value);
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"monitorId\\":\\"${value}\\"}","serviceCode":"queryXNReportInfo","timestamp":"","uuid":""}`,
      }).then((res) => {
        console.log(res);
        this.form = res.data.parameter.xNReportPartInfoDmo;
      });
    },
    empty() {
      this.form = {
        monitorId: "",
        reportEmail: "",
        reportTitle: "",
        projectName: "",
        projectSource: "",
        projectDate: "",
        monitorStartDate: "",
        monitorEndDate: "",
        projectCycle: "",
        projectEmployer: "",
        construcUnit: "",
        monitorUnit: "",
        emailTitle: "",
        emailContent: "",
      };
    },
    save() {
      let queryData = {
        monitorId: this.form.monitorId,
        reportEmail: this.form.reportEmail,
        reportTitle: this.form.reportTitle,
        projectName: this.form.projectName,
        projectSource: this.form.projectSource,
        projectDate: moment(this.form.projectDate).format("YYYY-MM-DD"),
        monitorStartDate: moment(this.form.monitorStartDate).format(
          "YYYY-MM-DD"
        ),
        monitorEndDate: this.form.monitorEndDate,
        projectCycle: this.form.projectCycle,
        projectEmployer: this.form.projectEmployer,
        construcUnit: this.form.construcUnit,
        monitorUnit: this.form.monitorUnit,
        emailTitle: this.form.emailTitle,
        emailContent: this.form.emailContent,
      };
      if (queryData.monitorId != "") {
        Axios({
          url: serviceApi.KB_API,
          method: "post",
          data: `appMsg={"parameter":"{\\"monitorId\\":\\"${queryData.monitorId}\\",\\"reportEmail\\":\\"${queryData.reportEmail}\\",\\"reportTitle\\":\\"${queryData.reportTitle}\\",\\"projectName\\":\\"${queryData.projectName}\\",\\"projectSource\\":\\"${queryData.projectSource}\\",\\"projectDate\\":\\"${queryData.projectDate}\\",\\"monitorStartDate\\":\\"${queryData.monitorStartDate}\\",\\"projectCycle\\":\\"${queryData.projectCycle}\\",\\"projectEmployer\\":\\"${queryData.projectEmployer}\\",\\"construcUnit\\":\\"${queryData.construcUnit}\\",\\"emailTitle\\":\\"${queryData.emailTitle}\\",\\"emailContent\\":\\"${queryData.emailContent}\\"}","serviceCode":"saveXNReport","timestamp":"","uuid":""}`,
        }).then((res) => {
          let message = res.data.parameter.message;
          this.$message({
            message: message,
            type: "success",
            duration: 1000,
          });
        });
      }
    },
    // 上传文件之前的钩子
    handleBeforeUpload(file){
      console.log('before')
      if(!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
        this.$notify.warning({
          title: '警告',
          message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
        })
      }
      let size = file.size / 1024 / 1024 / 2
      if(size > 2) {
        this.$notify.warning({
          title: '警告',
          message: '图片大小必须小于2M'
        })
      }
    },
    // 文件超出个数限制时的钩子
    handleExceed(files, fileList) {

    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    uploadFile() {
      this.$refs.upload.submit()
    }
  },
  created() {
    Axios({
      url: serviceApi.KB_API,
      method: "post",
      data: `appMsg={"parameter":"{\\"moduleEnum\\":\\"\\"}","serviceCode":"listXNReportMonitor","timestamp":"","uuid":""}`,
    }).then((res) => {
      console.log(res);
      this.monitorList = res.data.parameter.list;
    });
  },
};
</script>

<style lang="less" scoped>
.content {
  padding: 0 20%;
}
h3 {
  text-align: center;
  font-size: 25px;
  margin-bottom: 20px;
  font-weight: 400;
}
</style>